<template>
  <div>
    <ul>
      <li v-for="item in commingSoonMovieDatas" :key="item.filmId">
        <img :src="item.poster" alt="" />
        <div class="box1">
          <div class="innerbox">{{ item.name }}</div>
          <div class="innerbox">
            主演<span>{{ item.director }}</span>
          </div>
          <div class="innerbox"><span>上映日期</span>|<span>周五</span></div>
        </div>
        <div class="order">预约</div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import { commingSoonList } from "../../API/movieList";
import { useRouter } from "vue-router";
export default {
  setup() {
    // 即将上映请求
    getLIst2();
    const commingSoonMovieDatas = ref([]);
    async function getLIst2() {
      const params = {
        cityId: "110100",
        pageNum: "1",
        pageSize: "10",
        type: "2",
        k: "2433665",
      };
      const { data } = await commingSoonList(params);
      const list2 = data.data.films;
      console.log(list2);

      commingSoonMovieDatas.value = list2;
    }

    return {
      commingSoonMovieDatas,
      getLIst2,
    };
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
ul {
  margin-top: 44px;
  padding-bottom: 40px;
}
li {
  width: 100%;
  height: 134px;
  border-bottom: 1px solid rgb(229, 228, 228);

  padding: 15px;
  box-sizing: border-box;
}
img {
  width: 66px;
  height: 99px;
  float: left;
}
.box {
  width: 210px;
  height: 82px;
  float: left;
  margin-top: 2.333333vw;
  padding-left: 15px;
}
.box1 {
  width: 210px;
  height: 82px;
  float: left;
  margin-top: 3vw;
  padding-left: 15px;
  padding-top: 10px;
}
.box1 > .innerbox:nth-of-type(2),
.innerbox:nth-of-type(3) {
  font-size: 14px;
  color: grey;
}
.box .innerbox {
  width: 210px;
  height: 22px;
  font-size: 18px;
}
.box1 .innerbox {
  width: 210px;
  height: 22px;
  font-size: 18px;
}
.box > .innerbox:nth-of-type(2),
.innerbox:nth-of-type(3),
.innerbox:nth-of-type(4) {
  font-size: 14px;
  color: grey;
}
.box > .innerbox:nth-of-type(3),
.innerbox:nth-of-type(4) {
  font-size: 12px;
  color: grey;
}
.buy,
.order {
  width: 50px;
  height: 25px;
  border: 1px solid orange;
  border-radius: 5px;
  float: left;
  margin-top: 9.333333vw;
  margin-left: 2.8vw;
  text-align: center;
  line-height: 25px;
  font-size: 14px;
  color: orange;
}
.grade {
  color: orange;
}
.van-tabs__line {
  background-color: orange !important;
}
</style>
